<!--
@Author: 刘洋 3016218175

@Date: 2018-12-12

@行政人员员工信息管理界面

@Last Modified time: 2018-12-16-->
<div class="box" *ngIf="!selectUser">
    <div class="box-header">
      <h3 class="box-title">员工表</h3>

      <div class="box-tools">
        <div class="input-group input-group-sm" style="width: 150px;">
          <input type="number" #table_search class="form-control pull-right" placeholder="员工Id">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default" (click)="getUserLike(table_search.value)"><i class="fa fa-search"></i></button>
          </div>
        </div>
      </div>
    </div>
    <!-- /.box-header -->
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
    <div class="box-body">
      <table id="example2" class="table table-bordered table-hover">
        <tr>
          <th>员工ID</th>
          <th>姓名</th>
          <th>性别</th>
          <th>部门</th>
          <th>操作</th>
        </tr>
        <tr *ngFor="let user of users"> 
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.sex}}</td>
          <td>{{user.department}}</td>
          <td><a class="btn btn-danger btn-xs" (click)="onSelect(user)">查看</a></td>
        </tr>
      </table>
    </div>
    <!-- /.box-body -->
  </div>
</div>
</div>
</div>
  </div>
<div >
    <!-- Content Header (Page header) -->
    <section class="content-header" *ngIf="selectUser">
      <h1>
        员工详情表
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">

      <div class="row">
        <div class="col-md-3">

          <!-- Profile Image -->
          <div class="box box-primary" *ngIf="selectUser">
            <div class="box-body box-profile">

              <h3 class="profile-username text-center">{{selectUser.name}}</h3>

              <p class="text-muted text-center">{{selectUser.position}}</p>

              <ul class="list-group list-group-unbordered">
                <li class="list-group-item">
                  <b>年龄</b> <a class="pull-right">{{selectUser.age}}</a>
                </li>
                <li class="list-group-item">
                  <b>性别</b> <a class="pull-right">{{selectUser.sex}}</a>
                </li>
                <br>
                <div class="col-md-2 col-md-offset-4">
                  <button type="button" class="btn btn-danger" (click)="deleteUser(selectUser)">删除员工</button>
                </div>
              </ul>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <div class="col-md-9" >
          <div class="nav-tabs-custom" *ngIf="selectUser" style="width: 80%;">
              <section class="content-header">
                  <h1>
                    信息设置:
                  </h1>
              </section>
              <div class="form-horizontal">
                <br>
                  <div class="form-group">
                    <label  class="col-md-2 col-md-offset-3 control-label">部门 ： </label>
                    <div class="col-md-3">
                      <input [(ngModel)]="selectUser.department" placeholder="department">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-md-offset-3 control-label">职位 ： </label>

                    <div class="col-md-3">
                      <input [(ngModel)]="selectUser.position" placeholder="position">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-md-offset-3 control-label">年假长度 ： </label>
                    <div class="col-md-3">
                      <input [(ngModel)]="selectUser.annual_leave_length" placeholder="annual_leave_length">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-md-offset-3 control-label">剩余可休年假 ： </label>

                    <div class="col-md-3">
                      <input [(ngModel)]="selectUser.remain_annual_leave" placeholder="remain_annual_leave">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-2 col-md-offset-5">
                      <button type="button" class="btn btn-success" (click)="updateUser(selectUser)">提交修改</button>
                    </div>
                    <div class="col-md-3">
                      <button type="button" class="btn btn-default" (click)="selectUser=!selectUser">返回</button>
                    </div>
                  </div>
                  <br>
                </div>
            <!-- /.tab-content -->
          </div>
          <!-- /.nav-tabs-custom -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>